常見的 HTML elements

圖片 (img)

想要在網頁放上圖片，可以使用img標籤，他不用開頭和結尾標籤，單獨一個img即可，我們稱這樣的標籤為空元素(empty element)。不像段落文字標籤，需要開頭與結尾這種成雙成對的包覆規則，只需要一個標籤即可發揮功能。
在使用上，主要是標籤的屬性，包括圖片檔案來源src、圖片替代文字alt、高度height、寬度width。

例如我要在網頁放上一張圖片，HTML可以這麼寫：

<p> 圖片範例 </p>
<img src="minecraft.jpg" alt="minecraft" height="691" width="1632">

程式執行後的網頁內容將會是：

img是圖片的英單image之簡稱，取此單字的前三個字母代表。而屬性名稱src則是來源檔案source file之簡稱，alt是alternative text替代文字，height與width則是高度與寬度的英文。
這邊需要注意的是，src屬性必須要有圖片的副檔名，這邊的例子是.jpg，如果沒有副檔名則圖片無法顯示。

常見的圖片附檔名包括:

• .jpeg
  靜態影像壓縮格式的圖片，與jpg是相同的意思，只是早期副檔名只能三個字母，所以只取jpg。雖有圖片失真的缺點，但因為檔案小的特性，有利於網頁傳輸，是很常見的網頁圖片格式。
• .png
  可攜式網路圖形，圖片品質比.jpeg好，但檔案較大，可有透明底圖，常用於logo圖片。
• .gif
  圖像互換格式，可以插入多個影格產生動畫效果。
• .svg
  可縮放向量圖形，向量圖的特性就是縮放不失真。

標籤的屬性雖然有點複雜，但其實只是將屬性名稱加上等號，要添加的屬性填入引號內，不同屬性空一格表示。屬性可以選擇性的添加，依照需求為標籤添加屬性，當然如是img這類標籤，一定要有src屬性，才可加上圖片。

屬性名稱="要給屬性的值"

而選擇性的添加屬性的意思是，如只想填寫檔案來源、替代文字，以及圖片高度，寬度並不想設定，那麼瀏覽器會按照原本的圖面比例，調整圖片寬度。例如：

<img src="minecraft.jpg" alt="minecraft" height="300" >

程式執行後的網頁內容將會是：

超連結 (anchor)

超連結的標籤是anchor的縮寫，主要使用屬性由href展現功能，href是hypertext reference的縮寫。

<p> 超連結範例 </p>
<a href="https://reurl.cc/rgpVV4" target="_blank">理想混蛋 Bestards【行星】</a>

程式執行後的網頁內容將會是：

如範例所示，點選「理想混蛋 Bestards【行星】」後，網頁就會轉跳到你在href屬性所設定的位置或網址。超連結標籤除了href這個屬性外，還有一個很常用的屬性是target，將屬性的值設為blank，就可以讓超連結自動開新分頁，而非預設的直接覆蓋掉原本的網頁。

超連結標籤的內容除了文字，也可以是圖片，若想建立圖片的超連結，直接將文字替換為img標籤即可。

<p> 超連結範例 </p>
<a href="https://reurl.cc/rgpVV4" target="_blank"><img src='Galaxy Version.png' alt='Galaxy' height='200'></a>

程式執行後的網頁內容將會是：

超連結對於網頁是相當常見，如點即某個圖片或某個文字，而轉跳到網頁的特定位置，皆是超連結的呈現。

註解

前面所提到的各種標籤都會顯示在網頁上，但如果在編寫HTML時想在某個地方做小筆記，提醒自己或他人，就可以使用註解標籤了。

<!-- 填入你的註解-->

在中填入文字，瀏覽器就不會把顯示在網頁上。使用Ctrl+/(windows系統)可以在編輯器快速打出註解的符號。